<template>
  <view>
    <view class="message-box">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
                  indicator-dots='false' indicator-color="rgba(0,0,0,.0)" indicator-active-color="rgba(0,0,0,.0)"
                  autoplay="true" interval="4000">
            <swiper-item class="swiper-list" v-for="(item, index) in msgs" :key="index" @tap.stop="redirectDetail(item)">
              <view class="message-tltle text-custom">{{item.msgTypeName}}</view>
              <view class="message-content" >{{ item.msgContent }}</view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, computed, reactive, ref} from 'vue'
import {onLoad, onReady, onShow} from '@dcloudio/uni-app';
import {useStore} from "@/common/store";
import {findTop5} from "@/common/api/msg";
const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)
const msgs = ref([])

const initMsg = () => {
  findTop5(userId.value||0).then(res => {
    msgs.value = res.data;
  });
}

const redirectDetail = (item: {id: number}) => {
  uni.navigateTo({
    url: `/pages/message/messageInfo?id=${item.id}`
  })
}

onShow(() => {
  initMsg();
})

</script>

<style lang="scss" scoped>

.message-box {
  width: 100%;
  height: 120rpx;
  background:url("../../static/images/clock.png");
  background-repeat: no-repeat;
  background-size: 120rpx 120rpx;
  background-position: 15rpx 10rpx;
  margin: 0rpx 0rpx 10rpx 0rpx;
  padding-left: 130rpx;

  .message-tltle {
    height: 65rpx;
    line-height: 70rpx;
    font-weight: 600;
    font-size: 28rpx;
  }

  .message-content {
    color: #8799a3;
  }
  span {
    background-color: #8799a3;
    color: #FFFFFF;
    padding: 2rpx 8rpx;
    border-radius: 8rpx;
    margin-right: 8rpx;
  }
}
</style>
